    <template>
        <div class="pie-box">
            <div style="height: 600px;overflow-y: scroll">
                <el-button type="primary" @click="changeData">修改数据值</el-button>
                <div class="config-box"  style="background-color: antiquewhite;">
                    <div class="pie-box">
                        是否显示图例
                        <el-switch v-model="config.sfShowLabel" @change="changeLabel"></el-switch>
                    </div>
                    <div class="pie-box">
                        是否显示图例
                        <el-switch v-model="config.sfLegend" @change="changeLegend"></el-switch>
                    </div>
                    <div class="pie-box">
                        是否开启样式设计
                        <el-switch v-model="config.sfLegendStyle" @change="changeSFLegendStyle"></el-switch>
                    </div>
                    <div class="pie-box">
                        图例样式
                        <el-color-picker v-model="config.legendItemStyleColor" @change="changeLegendItemStyleColor"></el-color-picker>
                    </div>
                    <div class="pie-box">
                        图例类型
                        <el-radio-group v-model="config.legendIcon" size="small" @change="changeLegendIcon">
                            <el-radio-button label="circle" >圆形</el-radio-button>
                            <el-radio-button label="rect" >矩形</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="pie-box">
                        图例布局
                        <el-radio-group v-model="config.legendOrient" size="small" @change="changeLegendOrient">
                            <el-radio-button label="horizontal" >横向</el-radio-button>
                            <el-radio-button label="vertical" >纵向</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="pie-box">
                        图例字体样式
                        <el-select v-model="config.legendFontFamily" class="m-2" placeholder="Select" @change="changeLegendFontFamily">
                            <el-option
                                v-for="item in familyList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </div>
                    <div class="pie-box">
                        图例字体颜色
                        <el-color-picker v-model="config.legendTextStyleColor" @change="changeLegendTextStyleColor"></el-color-picker>
                    </div>
                    <div class="pie-box">
                        图例文字大小
                        <el-input-number v-model="config.legendTextStyleFontSize" :min="12" @change="changeLegendTextStyleFontSize" />
                    </div>
                </div>
                <div class="config-box" style="background-color: rgba(183, 103, 103, 0.5)">
                    <div class="pie-box">
                        是否显示标题
                        <el-switch v-model="config.sfTitle" @change="changeSFTitle"></el-switch>
                    </div>
                    <div class="pie-box">
                        是否加粗
                        <el-switch v-model="config.sfTitleBold"
                                   @change="changeTitleWeight"
                                   active-text="加粗"
                                   inactive-text="常规"
                                   active-value="bold"
                                   inactive-value="400"
                        ></el-switch>
                    </div>
                    <div class="pie-box">
                        是否倾斜
                        <el-switch
                            v-model="config.sfTitleItalic"
                            @change="changeSFTitleItalic"
                            active-text="倾斜"
                            inactive-text="常规"
                            active-value="italic"
                            inactive-value="normal"
                        >
                        </el-switch>
                    </div>
                    <div class="pie-box">
                        字体大小
                        <el-input-number v-model="config.titleFontSize" :min="12" @change="changetitleFontSize" />
                    </div>
                    <div class="pie-box">
                        字体颜色
                        <el-color-picker v-model="config.titleColor" @change="changeTitleColor"></el-color-picker>
                    </div>
                    <div class="pie-box">
                        背景颜色
                        <el-color-picker v-model="config.titleBGColor" @change="changeTitleBGColor"></el-color-picker>
                    </div>
                    <div class="pie-box">
                        边框宽度
                        <el-input-number v-model="config.titleStrokeWidth" :min="0" @change="changetitleStrokeWidth" />
                    </div>
                    <div class="pie-box">
                        边框颜色
                        <el-color-picker v-model="config.titleStroke" @change="changetitleStroke"></el-color-picker>
                    </div>
                </div>
                <div class="config-box" style="background-color: #ffcc6f">
                    <div class="pie-box">
                        是否显示提示框
                        <el-switch v-model="config.sfTooltip" @change="changesfTooltip"></el-switch>
                    </div>
                </div>
            </div>
            <div>
                <p>D3JS实现的3D饼图</p>
                <div id="abc"></div>
            </div>
        </div>
    </template>

<script setup>
import pie from "../utils/pie";
import {onMounted, ref, reactive} from 'vue'
import { debounce } from 'lodash'
//是否显示图例
let config = reactive({
    color:["#5470c6","#91cc75","#fac858","#ee6666","#73c0de"],//颜色
    sfShowLabel:true,//是否显示文本标签
    sfLegend: true, //是否显示图例
    sfLegendStyle:false,//是否开启图例样式设置
    legendItemStyleColor:'#3366CC', //图例颜色
    legendIcon:'circle', //图例样式
    legendOrient:'horizontal', //图例，横向、纵向
    legendType:'scroll', //图例类型，普通图例plain还是 scroll翻页图例
    legendFontFamily:'sans-serif', //图例字体样式
    legendTextStyleColor:'#000000', //字体颜色
    legendTextStyleFontSize:12, //字体大小
    sfTitle:true, //是否显示标题
    sfTitleBold:'400', //标题是否加粗
    sfTitleItalic:'italic', //标题是否倾斜
    titleFontSize:20, // 字体大小
    titleColor:'red', // 字体颜色
    titleBGColor:'#86909c', //背景颜色
    titleStrokeWidth:0, //边框宽度
    titleStroke:'#ffffff', //边框颜色
    sfTooltip:true, //是否显示提示框
})
const salesData = [
    {label: "2023-05-01", value: 61, DWMC:'俩'},
    {label: "2023-05-02", value: 70, DWMC:'俩'},
    {label: "2023-05-03", value: 67, DWMC:'俩'},
    {label: "2023-05-04", value: 21, DWMC:'俩'},
    {label: "2023-05-05", value: 23, DWMC:'俩'},
    {label: "2023-05-06", value: 82, DWMC:'俩'},
    {label: "2023-05-07", value: 26, DWMC:'俩'},
    {label: "2023-05-08", value: 57, DWMC:'俩'}
];
const familyList = [
        {
            value:'sans-serif',
            label:'黑体'
        },
        {
            value:'serif',
            label:'宋体'
        },
        // {
        //     value:'monospace',
        //     label:'等宽字体'
        // },
        {
            value:'Arial',
            label:'Arial'
        },
        {
            value:'Courier New',
            label:'等宽字体'
        },
        {
            value:'Microsoft YaHei',
            label:'微软雅黑'
        },
    ] // 图例文字字体
const changeData = () => {
    pie('#abc', 700, 400, salesData, 250, 200, 150, 100, 30, config)
}
const randomData = () => {
    return salesData.map(function (d) {
        return {label: d.label, value: 1000 * Math.random(), color: d.color,show:true};
    });
}
/**
 * @Author: zhangjinhao
 * @Date: 2023/4/12 14:47
 * @Describe: 是否显示图例
 */
const changeLegend = (val) => {
    config.sfLegend = val
    changeData()
}
/**
 * @Author: zhangjinhao
 * @Date: 2023/4/12 14:57
 * @Describe: 是否设置图例样式
 */
const changeSFLegendStyle = (val) => {
    config.sfLegendStyle = val
    changeData()
}
const changeLegendItemStyleColor = (val) => {
    config.legendItemStyleColor= val
    changeData()
}
//修改图例样式
const changeLegendIcon = (val) => {
    config.legendIcon = val
    changeData()
}
//修改图例布局
const changeLegendOrient = (val) => {
    config.legendOrient = val
    changeData()
}
//修改图例字体样式
const changeLegendFontFamily = (val) => {
    config.legendFontFamily = val
    changeData()
}
//修改图例文字颜色
const changeLegendTextStyleColor = (val) => {
    config.legendTextStyleColor = val
    changeData()
}
//修改文字大小
const changeLegendTextStyleFontSize = debounce((val) => {
    config.legendTextStyleFontSize = val
    changeData()
},500)
//是否显示标题
const changeSFTitle = (val) => {
    config.sfTitle = val
    changeData()
}
const changeTitleWeight = (val) => {
    config.sfTitleBold = val
    changeData()
}
const changeSFTitleItalic = (val) => {
    config.sfTitleItalic = val
    changeData()
}
const changetitleFontSize = debounce((val) => {
    config.titleFontSize = val
    changeData()
},500)
const changeTitleColor = (val) => {
    config.titleColor = val
    changeData()
}
const changeTitleBGColor = (val) => {
    config.titleBGColor = val
    changeData()
}
const changetitleStrokeWidth = debounce((val) => {
    config.titleStrokeWidth = val
    changeData()
},500)
const changetitleStroke = (val) => {
    config.titleStroke = val
    changeData()
}
const changesfTooltip = (val) => {
    config.sfTooltip = val
    changeData()
}
const changeLabel = (val) => {
    config.sfShowLabel = val
    changeData()
}

onMounted(() => {
    pie('#abc', 700, 400, salesData, 250, 200, 150, 100, 30, config)

})
// export default {
//     data() {
//         return {
//             salesData: [
//                 { label: 'Basic',value: 10, color: '#3366CC' },
//                 { label: 'Plus',value: 20, color: '#DC3912' },
//                 { label: 'Lite', value: 30,color: '#FF9900' },
//                 { label: 'Elite',value: 40, color: '#109618' },
//                 { label: 'Delux',value: 50, color: '#990099' }
//             ]
//         };
//     },
//     mounted() {
//         pie('#abc',700,400,this.salesData,250, 200, 150, 100, 30);
//     },
//     methods: {
//         changeData() {
//             pie('#abc',700,400,this.randomData(),250, 200, 150, 100, 30);
//         },
//         randomData() {
//             return this.salesData.map(function(d) {
//                 return { label: d.label, value: 1000 * Math.random(), color: d.color };
//             });
//         }
//     }
// };
</script>

<style lang="scss">
#abc{
    width: 700px;
    height: 400px;
    position: relative;
}
.pie-box {
    display: flex;
    align-content: center;
    justify-content: space-between;
    margin-bottom: 10px;
    .config-box{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}
.tooltip-box{
    background: #F2F4FF;
    width: 100px;
    height: 40px;
    position: absolute;
    opacity: 0;
    text-align: center;
    font-size: 12px;
    line-height: 40px;
}
</style>
